import React, { Component } from 'react';
import {
    ProgressBarAndroid,
    AppRegistry,
    StyleSheet, Text, Dimensions, TouchableOpacity, Image,
    View, ScrollView,
    ActivityIndicator,
    FlatList


} from 'react-native';

import {
    Tabs, Icon, Button,
    Modal,
    WhiteSpace,
    WingBlank,
    Toast, Flex, Tag, DatePicker, List,
    Provider,
} from '@ant-design/react-native';
import request from '../../static/utils/request';

import RefreshListView, { RefreshState } from "react-native-refresh-list-view";

const Item = List.Item;
const Brief = Item.Brief;

export default class Home extends Component {


    state = {
        refreshState: RefreshState.Idle, //默认状态
        isLoading: true,
        pageIndex: 1, //页码
        pageSize: 10, //每页的页容量
        total: 0, //总条数
        movieList: [], //加载出来的电影数组
        visible3: false,
        visible2: false,
        value: undefined,
    };


    onClose3 = () => {
        this.setState({
            visible3: false,
        });
    };

    onClose2 = () => {
        this.setState({
            visible2: false,
        });
    };


    onDatePicker = (value) => {
        console.log(value)
        this.setState({ value });
    };

    componentDidMount() {
        this.onsave()
    }

    onsave = () => {
        const start = (this.state.pageIndex - 1) * this.state.pageSize;

        request({
            url: `/zhrq-web/patrol/patroltask/getPageList`,
            method: 'POST',
            data: {}
        }).then(data => {
            console.log(data, 456)
            if (data.rc == 0) {
                this.setState({
                    movieList: data.ret.items,
                })

            }
        })
    }

    onimg = () => {
        console.log(31)
    }

    onqd = () => {
        console.log(789)
        this.setState({
            visible2:false
        })
       this.props.navigation.navigate('Home_qd')
    }




    _keyExtractor = (item, index) => item.id;

    render() {




        return (
            <View
                style={{ flex: 1, justifyContent: 'center', backgroundColor: "#F2F2F2" }}>
                <Modal
                    popup
                    visible={this.state.visible3}
                    animationType="slide-up"
                    onClose={this.onClose3}
                    maskClosable
                >
                    <View style={{ flex: 1, height: 400, padding: 5, }}>
                        <View style={{ flexDirection: "row", flex: 1.5, backgroundColor: "#fff", margin: 3 }}>
                            <View style={{ flex: 1 }}>
                                <View style={{ flex: 1, alignItems: "center", flexDirection: "row", display: "flex" }}><Text style={{ textAlign: "center", paddingLeft: 10 }}>站点选取 : </Text></View>
                                <View style={{ flex: 1 }}></View>
                            </View>
                            <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                <View style={{ display: "flex", justifyContent: "center" }}>
                                    <View style={{ margin: 2 }}><Tag style={{ width: 80 }}>全部</Tag></View>
                                    <View style={{ margin: 2 }}><Tag>#1企业</Tag></View>
                                </View>
                            </View>
                            <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                    <View style={{ margin: 2 }}><Tag>#2企业</Tag></View>
                                    <View style={{ margin: 2 }}><Tag>#3企业</Tag></View>
                                </View>
                            </View>
                            <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                    <View style={{ margin: 2 }}><Tag>#4企业</Tag></View>
                                    <View style={{ margin: 2 }}><Tag style={{ opacity: 0 }}>#5企业</Tag></View>
                                </View>
                            </View>
                        </View>

                        <View style={{ flexDirection: "row", flex: 1, backgroundColor: "#fff", margin: 3 }}>
                            <View style={{ flex: 1, alignItems: "center", flexDirection: "row", display: "flex" }}>
                                <Text style={{ textAlign: "center", paddingLeft: 10 }}>报表类型 : </Text>
                            </View>
                            <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                    <View style={{ margin: 2 }}><Tag style={{ width: 80 }}>全部</Tag></View>
                                </View>
                            </View>
                            <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                    <View style={{ margin: 2 }}><Tag style={{ width: 80 }}>政府考核</Tag></View>
                                </View>
                            </View>
                            <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                    <View style={{ margin: 2 }}><Tag style={{ width: 80 }}>企业自检</Tag></View>
                                </View>
                            </View>
                        </View>

                        <View style={{ flexDirection: "row", flex: 2, backgroundColor: "#fff", margin: 3 }}>
                            <View style={{ flex: 1 }}>
                                <View style={{ flex: 1, alignItems: "center", flexDirection: "row", display: "flex" }}><Text style={{ textAlign: "center", paddingLeft: 10 }}>报表名称 : </Text></View>
                                <View style={{ flex: 1 }}></View>
                            </View>
                            <View style={{ justifyContent: 'center', flex: 3 }}>
                                <View style={{ display: "flex", justifyContent: "center", flex: 1 }}>
                                    <View style={{ margin: 2 }}><Tag>全部</Tag></View>
                                </View>
                                <View style={{ display: "flex", justifyContent: "center", flex: 1 }}>
                                    <View style={{ margin: 2 }}><Tag>瓶装气商业用气场所安全检查考核评分表</Tag></View>
                                </View>
                                <View style={{ display: "flex", justifyContent: "center", flex: 1 }}>
                                    <View style={{ margin: 2 }}><Tag>瓶装气供应站 (点) 安全检查考核评分表</Tag></View>
                                </View>
                            </View>

                        </View>

                        <View style={{ flexDirection: "row", flex: 1, backgroundColor: "#fff", margin: 3 }}>
                            <View style={{ flex: 1 }}>
                                <View style={{ flex: 1, alignItems: "center", flexDirection: "row", display: "flex" }}><Text style={{ textAlign: "center", paddingLeft: 10 }}>报警时间 : </Text></View>

                            </View>
                            <View style={{ alignItems: 'center', justifyContent: 'center', flex: 3 }}>

                                <List style={{ width: 250 }}>
                                    <DatePicker
                                        value={this.state.value}
                                        mode="date"
                                        minDate={new Date(2015, 7, 6)}
                                        maxDate={new Date(2026, 11, 3)}
                                        onChange={this.onDatePicker}
                                        format="YYYY-MM-DD"
                                    >
                                        <List.Item arrow="horizontal" size="small"></List.Item>
                                    </DatePicker>
                                </List>
                            </View>
                        </View>
                        <View style={{ flexDirection: "row", flex: 1, backgroundColor: "#fff", margin: 3 }}>
                            <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                    <View style={{ margin: 2 }}><Button size="small" style={{ width: 100, height: 30 }}>取消</Button></View>
                                </View>
                            </View>
                            <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                    <View style={{ margin: 2 }}><Button type="primary" size="small" style={{ width: 100, height: 30 }}>查询</Button></View>
                                </View>
                            </View>
                        </View>
                    </View>
                </Modal>




                <View
                    style={{ flexDirection: "row", alignItems: "center", height: 50, backgroundColor: "#fff", borderBottomEndRadius: 3, borderBottomLeftRadius: 3, elevation: 2, marginBottom: 10, display: "flex" }}>



                    <TouchableOpacity style={{ flex: 1, flexDirection: "row", alignItems: "center", paddingLeft: 15 }}
                        onPress={() => this.setState({ visible3: true })}
                    >
                        <Image
                            style={{ width: 35, height: 35 }}
                            source={require('../../static/img/rili.png')}

                        />
                        <Text style={{ fontSize: 16, color: "#000" }} >当天</Text>
                    </TouchableOpacity>



                    <View style={{ flex: 1, paddingRight: 15 }}>
                        <Text style={{ fontSize: 16, textAlign: "right", color: "#000" }}>XX个</Text>
                    </View>
                </View>

                <View style={{ flex: 1, backgroundColor: "#fff" }}>
                    <ScrollView style={{ flex: 1, padding: 15 }}>
                        <Modal
                            popup
                            visible={this.state.visible2}
                            animationType="slide-up"
                            onClose={this.onClose2}
                            maskClosable
                        >
                            <View style={{ flex: 1, height: 200, backgroundColor: "#ccc" }}>
                                <View style={{
                                    flex: 1, backgroundColor: "#fff", alignItems: 'center',
                                    justifyContent: 'center',
                                    flexDirection: "row",
                                }}><Text>请选择签到方式</Text></View>
                                <TouchableOpacity
                                onPress={this.onqd}
                                style={{
                                    flex: 1, backgroundColor: "#fff", borderTopWidth: 1, alignItems: 'center',
                                    justifyContent: 'center',
                                    flexDirection: "row", borderTopColor: "#ccc", borderBottomWidth: 1, borderBottomColor: "#ccc"
                                }}><Text style={{fontSize:16,color:"#7A80FD"}}>签到</Text></TouchableOpacity>
                                <TouchableOpacity style={{
                                    flex: 1, marginBottom: 5, backgroundColor: "#fff", alignItems: 'center',
                                    justifyContent: 'center',
                                    flexDirection: "row",
                                }}><Text style={{fontSize:16,color:"#000"}}>填写检查表并签到</Text></TouchableOpacity>

                                <TouchableOpacity style={{
                                    flex: 1, backgroundColor: "#fff",
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    flexDirection: "row",
                                }}><Text style={{fontSize:16,color:"#000"}}>取消</Text></TouchableOpacity>


                            </View>
                        </Modal>
                        {

                            this.state.movieList.map((item, index) => {
                                return (
                                    <TouchableOpacity style={{ width: "100%", height: 100, backgroundColor: "#fff", borderRadius: 5, elevation: 3, marginBottom: 10, display: "flex", paddingTop: 10, paddingBottom: 10 }} key={index}
                                        onPress={() => this.setState({ visible2: true })}
                                    >
                                        <View style={{ flex: 1, flexDirection: "row", alignItems: "center", paddingLeft: 15 }}>
                                            <View style={{ flex: 4 }}>
                                                <Text style={{ fontSize: 16, color: "#000" }}>{item.taskName}</Text>
                                            </View>
                                            <View style={{ flex: 1.2, elevation: 5 }}>
                                                <Text style={{ textAlign: "right", height: 25, lineHeight: 25, backgroundColor: item.taskType == 1 ? "#5CCEFB" : "#FBBD5C", borderBottomLeftRadius: 15, elevation: 5, color: "#fff" }}>{item.taskType == 1 ? "安全检查" : "安全考核"}</Text>
                                            </View>
                                        </View>

                                        <View style={{ flex: 1, alignItems: "center", flexDirection: "row", paddingLeft: 15 }}>
                                            <Text>分配时间 : 2018年12月21日 12:12</Text>
                                        </View>

                                        <View style={{ flex: 1, alignItems: "center", flexDirection: "row", paddingLeft: 15 }}>
                                            <Text>预计完成时间 : 2018年12月21日 12:12</Text>
                                        </View>
                                    </TouchableOpacity>
                                )
                            })
                        }



                    </ScrollView>
                </View>

            </View>



        )

    }
}